import React from 'react';
import { Modal, Checkbox, Button } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
import { MenuOutlined } from '@ant-design/icons';
import './styles.scss';

export interface ColumnConfig {
  key: string;
  title: string;
  visible: boolean;
}

interface ColumnSettingModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (columns: ColumnConfig[]) => void;
  columnConfigs: ColumnConfig[];
}

const ColumnSettingModal: React.FC<ColumnSettingModalProps> = ({
  visible,
  onCancel,
  onOk,
  columnConfigs,
}) => {
  const [selectedColumns, setSelectedColumns] = React.useState<ColumnConfig[]>(columnConfigs);

  React.useEffect(() => {
    setSelectedColumns(columnConfigs);
  }, [columnConfigs]);

  const handleColumnChange = (key: string, checked: boolean) => {
    setSelectedColumns(prev => 
      prev.map(col => 
        col.key === key ? { ...col, visible: checked } : col
      )
    );
  };

  const handleSelectAll = (e: CheckboxChangeEvent) => {
    setSelectedColumns(prev => 
      prev.map(col => ({ ...col, visible: e.target.checked }))
    );
  };

  const handleReset = () => {
    setSelectedColumns(columnConfigs);
  };

  const handleSave = () => {
    onOk(selectedColumns);
  };

  const onDragEnd = (result: DropResult) => {
    if (!result.destination) {
      return;
    }

    const sourceIndex = result.source.index;
    const destinationIndex = result.destination.index;

    const newColumns = Array.from(selectedColumns);
    const [removed] = newColumns.splice(sourceIndex, 1);
    newColumns.splice(destinationIndex, 0, removed);

    setSelectedColumns(newColumns);
  };

  const isAllSelected = selectedColumns.every(col => col.visible);
  const isPartialSelected = selectedColumns.some(col => col.visible) && !isAllSelected;

  return (
    <Modal
      title="设置表格显示列"
      open={visible}
      onCancel={onCancel}
      footer={[
        <Button key="reset" onClick={handleReset}>
          重置
        </Button>,
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={handleSave}>
          确定
        </Button>,
      ]}
      width={500}
      className="column-setting-modal"
    >
      <div className="column-setting-content">
        <div className="select-all">
          <Checkbox
            indeterminate={isPartialSelected}
            checked={isAllSelected}
            onChange={handleSelectAll}
          >
            全选
          </Checkbox>
          <div className="tip">
            拖动列名可调整列的显示顺序
          </div>
        </div>
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="column-list">
            {(provided) => (
              <div
                ref={provided.innerRef}
                {...provided.droppableProps}
                className="column-list"
              >
                {selectedColumns.map((column, index) => (
                  <Draggable
                    key={column.key}
                    draggableId={column.key}
                    index={index}
                  >
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        className={`column-item ${snapshot.isDragging ? 'dragging' : ''}`}
                      >
                        <div className="item-content">
                          <div
                            {...provided.dragHandleProps}
                            className="drag-handle"
                          >
                            <MenuOutlined />
                          </div>
                          <Checkbox
                            checked={column.visible}
                            onChange={(e) => handleColumnChange(column.key, e.target.checked)}
                          >
                            {column.title}
                          </Checkbox>
                        </div>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    </Modal>
  );
};

export default ColumnSettingModal; 